<template>
  <div class="main" style="display: flex;">
    <div style="width: 380px;margin-right: 10px;">
        <div style="border-bottom: 2px solid #F0F0F0;padding-bottom: 25px;margin-bottom: 15px;">
            <div style="margin-top: 30px;">
                车位名：
                <el-input v-model="input1" placeholder="请输入车位名" style="width: 100%;margin-top: 10px;"></el-input>
            </div>
            <div style="margin-top: 30px">
                车位金额：
                <el-input v-model="input2" placeholder="请输入车位金额" style="width: 100%;margin-top: 10px;"></el-input>
            </div>
            <div style="margin-top: 30px">
                车位类型：
                <el-select clearable v-model="select1" placeholder="请选择车位类型" style="width: 100%;margin-top: 10px;">
                    <el-option
                    label="地下"
                    :value="1">
                    </el-option>
                    <el-option
                    label="地上"
                    :value="2">
                    </el-option>
                </el-select>
            </div>
            <div style="margin-top: 30px">
                车位状态：
                <el-select clearable v-model="select2" placeholder="请选择车位状态" style="width: 100%;margin-top: 10px;">
                    <el-option
                    label="已有车"
                    :value="1">
                    </el-option>
                    <el-option
                    label="未有车"
                    :value="2">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div style="text-align: center;">
            <el-button size="medium" icon="el-icon-search" type="primary" @click="lookfor" style="width: 150px;">查询</el-button>
            <el-button size="medium" icon="el-icon-edit" type="primary" @click="rewrite" style="width: 150px;">重置</el-button>
        </div>
    </div>
    <div style="flex: 1;">
        <div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
            <h2>车位列表</h2><el-button icon="el-icon-plus" @click="addcar" type="success">新增</el-button>
        </div>
        <div style="height: 490px;overflow-y: auto;margin-bottom: 20px;padding: 0 10px;">
            <el-table
                :data="cardata"
                border
                v-loading="loading"
                style="width: 100%">
                <el-table-column
                    prop="num"
                    align="center"
                    label="序号"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="parkname"
                    sortable
                    label="车位名称"
                    align="center"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="parkpay"
                    sortable
                    align="center"
                    label="车位金额">
                </el-table-column>
                <el-table-column
                    prop="parktype"
                    align="center"
                    label="车位类型">
                    <template slot-scope="scope">
                        <el-tooltip :content="'park Type: ' + scope.row.parktype" placement="top">
                        <el-switch
                            v-model="scope.row.parktype"
                            :active-value="1"
                            :inactive-value="2"
                            @change="getswitchtype(scope.row.id,scope.row.parkname,scope.row.parkpay,scope.row.parktype,scope.row.parkstatus)"
                            active-text="地下"
                            inactive-text="地上">
                        </el-switch>
                    </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="parkstatus"
                    align="center"
                    label="车位状态">
                    <template slot-scope="scope">
                        <el-tooltip :content="'park Status: ' + scope.row.parkstatus" placement="top">
                        <el-switch
                            v-model="scope.row.parkstatus"
                            :active-value="1"
                            :inactive-value="2"
                            @change="getswitchcar(scope.row.id,scope.row.parkname,scope.row.parkpay,scope.row.parktype,scope.row.parkstatus)"
                            active-text="已有车"
                            inactive-text="未有车">
                        </el-switch>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    width="300">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-share" :disabled="scope.row.parkstatus==1?true:false" @click="opendrawer(scope.row.id,scope.row.parkname,scope.row.parktype,scope.row.parkpay)" plain>分配车位</el-button>
                        <el-button icon="el-icon-edit" @click="editcar(scope.row.id,scope.row.parkname,scope.row.parkpay,scope.row.parktype,scope.row.parkstatus,)" plain>编辑</el-button>
                        <el-button icon="el-icon-delete" @click="deletecar(scope.row.id)" plain>移除</el-button>
                </template>
                </el-table-column>
                
                </el-table>
        </div>
        <div style="text-align: right;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 9, 20, 50]"
                :page-size="9"
                layout="total, sizes, prev, pager, next, jumper"
                :total="cartotal">
            </el-pagination>
        </div>
    </div>
    <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="60%">
    <el-form :model="editForm" :rules="editrules" ref="editForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="车位名称" prop="parkname">
            <el-input v-model="editForm.parkname"></el-input>
        </el-form-item>
        <el-form-item label="车位金额" prop="parkpay">
            <el-input v-model="editForm.parkpay"></el-input>
        </el-form-item>
        <el-form-item label="车位类型" prop="parktype">
            <el-select clearable v-model="editForm.parktype" placeholder="请选择活动区域" style="width: 100%;">
                <el-option label="地下" :value="1"></el-option>
                <el-option label="地上" :value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="车位状态" prop="parkstatus">
            <el-select clearable v-model="editForm.parkstatus" placeholder="请选择活动区域" style="width: 100%;">
                <el-option label="已有车" :value="1"></el-option>
                <el-option label="未有车" :value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="text-align: right">
            <el-button type="primary" @click="canceledit">取消</el-button>
            <el-button type="primary" @click="sotreedit">保存</el-button>
            <el-button type="primary" @click="rewriteedit">重置</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog
    title="提示"
    :visible.sync="dialogVisible2"
    width="60%">
    <el-form :model="editForm" :rules="editrules" ref="editForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="车位名称" prop="parkname">
            <el-input v-model="editForm.parkname"></el-input>
        </el-form-item>
        <el-form-item label="车位金额" prop="parkpay">
            <el-input v-model="editForm.parkpay"></el-input>
        </el-form-item>
        <el-form-item label="车位类型" prop="parktype">
            <el-select clearable v-model="editForm.parktype" placeholder="请选择活动区域" style="width: 100%;">
                <el-option label="地下" :value="1"></el-option>
                <el-option label="地上" :value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="车位状态" prop="parkstatus">
            <el-select clearable v-model="editForm.parkstatus" placeholder="请选择活动区域" style="width: 100%;">
                <el-option label="已有车" :value="1"></el-option>
                <el-option label="未有车" :value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="text-align: right">
            <el-button type="primary" @click="canceledit">取消</el-button>
            <el-button type="primary" @click="subedit">提交</el-button>
            <el-button type="primary" @click="rewriteedit">重置</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>
    <el-drawer
    title="我是标题"
    :visible.sync="drawer"
    direction="ltr"
    size="50%"
    :with-header="false">
        <h3 style="margin-left: 20px;margin-top: 30px">车位分配</h3>
        <div>
            <el-table
                :data="drawerdata"
                border
                ref="drawerdata"
                @selection-change="toggleSelection"
                stripe
                style="width: 90%;margin-left: 40px;margin-top: 10px;"
                >
                <el-table-column
                type="selection"
                :show-overflow-tooltip="false"
                align="center"
                width="55">
                </el-table-column
                >
                <el-table-column
                    prop="num"
                    align="center"
                    label="序号"
                    width="60">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="用户账号"
                    show-overflow-tooltip="true"
                    align="center"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="homeaddress"
                    align="center"
                    show-overflow-tooltip="true"
                    label="家庭住址"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="type"
                    align="center"
                    label="类型">
                    <template slot-scope="scope">
                        {{ scope.row.type == 1?"管理员":"普通用户" }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="parkname"
                    align="center"
                    show-overflow-tooltip="true"
                    label="车位">
                </el-table-column>

            </el-table>
        </div>
        <div style="text-align: right">
            <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="drawertotal"
                style="margin-right: 30px;margin-top: 20px">
            </el-pagination>
        </div>
        <div style="text-align: center">
            <el-button style="width: 30%;margin-right: 50px;margin-top: 50px;" @click="canceldrawer">取消</el-button>
            <el-button type="primary" style="width: 30%;" @click="drawerupdata">确定</el-button>
        </div>
        <div>

        </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
    data(){
        return{
            loading:false,
            //弹框
            dialogVisible: false,
            dialogVisible2: false,
            //左侧信息
            input1:"",
            input2:"",
            select1:"",
            select2:"",
            //车位信息
            cardata:[],
            //车位载荷
            carpage:{
                parkname: "",
                parkpay: "",
                parktype: "",
                parkstatus:"" ,
                currPage: 0,
                pageNum: 9,
            },
            //编辑载荷
            editForm:{
                u_id: "",
                parkname: "",
                parkpay: "",
                parktype: "",
                parkstatus: "",
                token:sessionStorage.getItem("token"),
            },
            //移除载荷
            deletepage:{
                id:"",
                token:sessionStorage.getItem("token")
            },
            cartotal:"",
            //编辑校验规则
            editrules: {
                parkname: [
                    { required: true, message: '车位名称不能为空', trigger: 'blur' },
                ],
                parkpay: [
                    { required: true, message: '车位金额不能为空', trigger: 'blur' },
                ],
                parktype: [
                    { required: true, message: '车位类型不能为空', trigger: 'blur' },
                ],
                parkstatus: [
                    { required: true, message: '车位状态不能为空', trigger: 'blur' },
                ],
                
            },
            //车位类型开关载荷
            switchtypepage:{
                u_id: "",
                parkname: "",
                parkpay: "",
                parktype: "",
                parkstatus: "",
                token:sessionStorage.getItem("token"),
            },
            //抽屉
            drawer: false,
            drawerdata:[],
            drawertotal:"",
            //抽屉载荷
            drawerpage:{
                currPage: 0,
                pageNum: 10,
            },
            ids:[],
            //抽屉更新载荷
            updatapage:{
                parkId: "",
                parkname: "",
                parkstatus: "",
                token: sessionStorage.getItem("token"),
                u_id:""
            },
            // 抽屉编辑载荷
            editpage:{
                parkname: "",
                parkpay: "",
                parkstatus: "",
                parktype: "",
                token: sessionStorage.getItem("token"),
                u_id:"",
            }
        }
    },
    created(){
        this.getcarmessage()
        this.getdrawermessage()
    },
    methods:{
        //初始化页面
        getcarmessage(){
            this.loading = true
            this.$axios.get("http://community.byesame.com/parking/getParkData",{params:this.carpage}).then((res)=>{
                console.log(res.data)
                this.cardata = res.data.data
                for(let i = 0;i<this.cardata.length;i++){
                    this.cardata[i].num = i+1
                }
                this.cartotal =  res.data.total
                setTimeout(() => {
                    this.loading = false
                }, 500);
            })
        },
        //分页器方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.carpage.currPage = 0
            this.carpage.pageNum = val
            this.getcarmessage()
        },
        handleCurrentChange(val) {
            this.carpage.currPage = val-1;
            this.getcarmessage()
        },
        handleSizeChange2(val) {
            console.log(`每页 ${val} 条`);
            this.drawerpage.currPage = 0
            this.carpage.pageNum = val
            this.getdrawermessage()
        },
        handleCurrentChange2(val) {
            this.drawerpage.currPage = val-1;
            this.getdrawermessage()
        },
        //查询
        lookfor(){
            this.carpage.parkname = this.input1
            this.carpage.parkpay = this.input2
            this.carpage.parktype = this.select1
            this.carpage.parkstatus = this.select2
            this.cardata.currPage = 0
            this.getcarmessage()

        },
        //重置
        rewrite(){
            this.input1 = "",
            this.input2 = "",
            this.select2 = "",
            this.select2 = "",
            this.carpage.parkname= ""
            this.carpage.parkpay=""
            this.carpage.parktype= ""
            this.carpage.parkstatus="" 
            this.carpage.currPage= 0
            this.getcarmessage()
        },
        //移除
        deletecar(id){
            this.$confirm('确定移除该车位?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.deletepage.id = id
                    this.$axios.get("http://community.byesame.com/parking/delParkData",{params:this.deletepage}).then((res)=>{
                        console.log(res)
                        this.getcarmessage()
                        this.$message({
                            type: 'success',
                            message: '移除成功!'
                        });
                })
            
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
            
        },
        //编辑
        editcar(id,parkname,parkpay,parktype,parkstatus){
            this.editForm.u_id = id
            this.editForm.parkname =parkname
            this.editForm.parkpay = parkpay
            this.editForm.parktype = parktype
            this.editForm.parkstatus = parkstatus
            this.dialogVisible = true
        },
        //编辑弹框三小只
        canceledit(){
            this.dialogVisible = false
            this.dialogVisible2 =false
        },
        sotreedit(){
            this.$refs['editForm'].validate((valid) => {
            if (valid) {
                this.$axios.post("http://community.byesame.com/parking/editParkData",this.editForm).then((res)=>{
                    console.log("编辑成功")
                    this.$message({
                    message: '保存成功',
                    type: 'success'
                    });
                    this.dialogVisible = false
                    this.getcarmessage()
                })
                
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        rewriteedit(){
            this.editForm.parkname =""
            this.editForm.parkpay = ""
            this.editForm.parktype = ""
            this.editForm.parkstatus = ""
        },
        //新增
        addcar(){
            this.editForm.parkname =""
            this.editForm.parkpay = ""
            this.editForm.parktype = ""
            this.editForm.parkstatus = ""
            this.dialogVisible2 = true
        },
        //新增取消
        
        //新增一小只
        subedit(){
            this.$refs['editForm'].validate((valid) => {
            if (valid) {
                this.$axios.post("http://community.byesame.com/parking/addParkData",this.editForm).then((res)=>{
                    console.log("编辑成功")
                    this.$message({
                    message: '提交成功',
                    type: 'success'
                    });
                    this.dialogVisible2 = false
                    this.getcarmessage()
                })
                
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //车位类型开关
        getswitchtype(u_id,parkname,parkpay,parktype,parkstatus){
            this.$axios.post("http://community.byesame.com/parking/editParkData",{
                u_id,
                parkname,
                parkpay,
                parktype,
                parkstatus,
                token: sessionStorage.getItem("token")
            }).then((res)=>{
                console.log(res.data)
                this.getcarmessage()
            })
        },
        //车位状态开关
        getswitchcar(u_id,parkname,parkpay,parktype,parkstatus){
            this.$axios.post("http://community.byesame.com/parking/editParkData",{
                u_id,
                parkname,
                parkpay,
                parktype,
                parkstatus,
                token: sessionStorage.getItem("token")
            }).then((res)=>{
                console.log(res.data)
                this.getcarmessage()
            })
        },
        //打开抽屉
        opendrawer(parkId,parkname,parktype,parkpay){
            this.updatapage.parkId = parkId
            this.editpage.u_id = parkId
            this.updatapage.parkname = parkname
            this.editpage.parkname = parkname
            this.editpage.parktype = parktype
            this.editpage.parkpay = parkpay
            this.drawer = true
            this.updatapage.u_id = ""
            this.updatapage.parkstatus = ""
            this.editpage.parkstatus = ""
        },
        //得到抽屉信息
        getdrawermessage(){
            this.$axios.get("http://community.byesame.com/users/getUsersData",{params:this.drawerpage}).then((res)=>{
                this.drawerdata = res.data.data
                this.drawertotal = res.data.total
                for(let i =0;i<this.drawerdata.length;i++){
                    this.drawerdata[i].num = i+1
                }
            })
        },
        //抽屉取消
        canceldrawer(){
            this.drawer = false
        },
        //抽屉确定
        determinedrawer(){
            
        },
        //抽屉勾选
        toggleSelection(selection) {
            
            this.ids = [];
            if (selection.length > 1) {
                console.log("执行第一个")
                this.updatapage.u_id = selection[0].id
                this.updatapage.parkstatus = selection[0].parkstatus
                this.editpage.parkstatus = selection[0].parkstatus
                //移除上一次选中行数据
                selection.shift();
                //修改选中图标为未选中状态
                this.$refs.drawerdata.clearSelection();
                //将当前选中行改为选中状态
                this.$refs.drawerdata.toggleRowSelection(selection[0]);
                console.log(selection)
            }else if(selection.length == 1){
                console.log("执行第二个")
                this.updatapage.u_id = selection[0].id
                this.updatapage.parkstatus = selection[0].parkstatus
                this.editpage.parkstatus = selection[0].parkstatus
            }
            else{
                this.updatapage.u_id = ""
                this.updatapage.parkstatus = ""
                this.editpage.parkstatus = ""
                console.log("清除说有")
            }
            // 选中的数据
            this.ids = selection
            // console.log(this.ids)
        },
        // 抽屉更新
        drawerupdata(){
            console.log(this.updatapage)
            this.$confirm('确定分配该车位?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                if(this.updatapage.u_id != ""){
                    this.$axios.post("http://community.byesame.com/users/updateParkStatus",this.updatapage).then((res)=>{
                        console.log(res)
                        if(this.editpage.parkstatus != ""){
                            this.$axios.post("http://community.byesame.com/parking/editParkData",this.editpage).then((res)=>{
                                console.log(res)
                                this.drawer = false
                                
                                this.getcarmessage()
                                this.deleteSelection()
                                this.$message({
                                    type: 'success',
                                    message: '分配成功!'
                                });
                            })
                        }
                    })
                }
            
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
            
            
        },
        // 抽屉编辑
        draweredit(){
            
        },
        //清除
        deleteSelection(rows) {
            if (rows) {
            rows.forEach(row => {
                this.$refs.drawerdata.toggleRowSelection(row);
            });
            } else {
            this.$refs.drawerdata.clearSelection();
            }
        },


        
    }
}
</script>

<style scoped>
::v-deep .el-table th{
    background-color: #EEF1F6;
}
::v-deep.el-table thead {
  font-weight: bold;
  font-size: 16px;
  color: black;
}
::v-deep .el-table tr{
    color: black;
    font-size: 14px;
}
</style>